<template>
    <div class="lists">
        <div class="img">
            <img src="@/assets/integral 1.png" alt="">
        </div>
        <div class="mask"></div>
        <div class="desc">Your Name</div>
    </div>
</template>

<script>
export default {
    data() {
        return {

        }
    }
}
</script>
<style scoped lang="less">
@a: 3.75vw;

.lists {
    width: (75/@a);
    height: (83/@a);
    background-color: #F5F5F5;
    border-radius: (10/@a);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .img {
        width: (30/@a);
        height: (30/@a);
        margin: (17/@a) (29/@a) 0 (23/@a);
        img {
            width: 100%;
        }
    }

    .mask {
        position: absolute;
        width: (10/@a);
        height: (10/@a);
        right: (-5/@a);
        top: (24/@a);
        background: #F5F5F5;
        transform: rotate(45deg);
    }

    .desc {
        display: block;
        position: absolute;
        bottom: (12/@a);
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: (11/@a);
        color: #000000;
    }
}
</style>
